import React, {useState} from "react";

export default function Sse() {
  const [sseD, setSseD] = useState<{[key: string]: unknown}[]>([])

  const handleSse = () => {
    // SSE (server-sent events) 服务端推送
    // 数据格式方面， SSE 使用的是 UTF8 编码的文本格式，只支持 UTF8编码
    // 使用两个换行符来分隔前后的消息，每条消息支持4种属性，属性名和属性值之间用冒号区分，新起一行（即使用一个换行符）创建下一个属性。
    const evtSource = new EventSource("http://localhost:3535/sse");
    evtSource.addEventListener("message", (e) => {
      const { data } = e;
      console.log('evtSource =>>', data);
      setSseD(pre => {
        const newD = JSON.parse(JSON.stringify(pre))
        newD.push(JSON.parse(data))
        return newD
      })
    });
    setTimeout(() => {
        evtSource.close();
      }, 10000);
  };
  
  return (
    <React.Fragment>
      <hr />
      <h4>sse: Server-Sent Events</h4>
      <button onClick={handleSse}>sse</button>
      <ul>
        {
          sseD.map((item: any, i) => item && <li key={i}>
            {item.id} - {item.hello}
          </li>)
        }
      </ul>
    </React.Fragment>
  );
}
